<template>
  <a-spin :spinning="loading">
    <div class="bg-white">
      <div class="p-20">
        <div class="flex items-center">
          <div class="flex items-center mr-20">
            <span class="flex-none">车型组名称或编码：</span>
            <div class="px-10">
              <a-input class="w-300"  :max-length="50" v-model="keyword" placeholder="请输入车型组名称或编码"/>
            </div>
          </div>

          <div class="flex items-center">
            <a-button type="primary" class="mx-5" @click="searchHandle">查询</a-button>
            <a-button class="mx-5" @click="resetHandle">重置</a-button>
          </div>
        </div>

        <div class="mt-20">
          <a-alert class="mb-10" message="车型组指车型的上级分类，即车型的组别" type="info" show-icon/>
        </div>

        <!--列表数据-->
        <div class="mt-20">
          <a-table class="table-con" :columns="columns" :data-source="pageList" :pagination="false">

          </a-table>

          <!--底部页码-->
          <div class="flex justify-end mt-20 items-center">
            <div class="pr-20">共{{rowCount}}条记录，第{{pageNum}}/{{Math.ceil(rowCount/rowsNum)}} 页</div>
            <a-pagination
              v-model="pageNum"
              show-size-changer
              show-quick-jumper
              :page-size.sync="rowsNum"
              :total="rowCount"
              @showSizeChange="sizeChange"
              @change="pageChange"
            >
            </a-pagination>
          </div>
        </div>

      </div>
    </div>
  </a-spin>
</template>

<script>
  import { vehicleGroupPetPagedList } from '@/api/car'

  export default {
    name: 'ModelGroupItem',
    data() {
      return {
        columns: [
          {
            title: '车型组编码',
            dataIndex: 'code'
          },
          {
            title: '车型组名称',
            dataIndex: 'name'
          },

        ],
        loading: true, // 页面是否在加载中
        pageList: [],// 列表总数据
        keyword: '', // 名称
        pageNum: 1, // 页码
        rowsNum: 10, // 每页的数据
        rowCount: 0 // 总页码数据
      }
    },
    created() {
      this._vehicleGroupPetPagedList() // 获取列表
    },
    methods: {
      _vehicleGroupPetPagedList() { // 获取列表
        this.loading = true
        vehicleGroupPetPagedList({
          keyword: this.keyword.trim(),
          pageNo: this.pageNum,
          pageSize: this.rowsNum
        }).then((res) => {
          this.pageList = res.items
          this.rowCount = res.rowCount
        }).finally(() => {
          this.loading = false
        })
      },

      searchHandle() { // 搜索
        this.pageNum = 1
        this._vehicleGroupPetPagedList()
      },

      resetHandle() { // 重置
        this.keyword = ''
        this._vehicleGroupPetPagedList()
      },

      sizeChange(pageNum, rowsNum) { // 每页数量变化的时候
        this.pageNum = pageNum
        this.rowsNum = rowsNum
        this._vehicleGroupPetPagedList()
      },

      pageChange(pageNum, rowsNum) {
        this.pageNum = pageNum
        this.rowsNum = rowsNum
        this._vehicleGroupPetPagedList()
      },
    }
  }
</script>

<style scoped lang="less">
  .table-con {
    /deep/ .ant-table-thead > tr > th, /deep/ .ant-table-tbody > tr > td {
      padding: 15px;
    }
  }
</style>